﻿<UserControl
    x:Class="VisualStateExample.VisualStateControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:VisualStateExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Width="200" Height="100">
        <Grid.Resources>
            <Style x:Key="DefaultEllipse" TargetType="Ellipse">
                <Setter Property="Height" Value="100"></Setter>
                <Setter Property="Width" Value="100"></Setter>
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <TranslateTransform/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Fill" Value="Coral"></Setter>
                <Setter Property="Stroke" Value="Chocolate"></Setter>
                <Setter Property="StrokeThickness" Value="2"></Setter>
            </Style>
        </Grid.Resources>
        <VisualStateManager.CustomVisualStateManager>
            <local:CustomVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="EllipseStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:2" To="Stretched">
                        <Storyboard Duration="0:0:2">
                            <DoubleAnimation From="0" To="-100"
                                                Storyboard.TargetName="MainEllipse"
                                                Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.Y)">
                                <DoubleAnimation.EasingFunction>
                                    <ElasticEase Oscillations="3" Springiness="3"></ElasticEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Default">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="100" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="MainEllipse" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="100" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="MainEllipse" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Stretched">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="200" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="MainEllipse" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="100" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="MainEllipse" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Ellipse x:Name="MainEllipse" HorizontalAlignment="Center" VerticalAlignment="Center"
                 Tapped="MainEllipse_OnTapped"
                 Style="{StaticResource DefaultEllipse}">
        </Ellipse>
    </Grid>
</UserControl>
